<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<div id="app" >
			<!-- 将用户输入的内容进行反转 abc--cba -->
			计算:<input type="text" v-model="msg" />{{msg}}
			<br />
			<!-- 将字符串拆分为数组
					split  切割 拆分为数组
					reverse 颠倒 将数组进行翻转
					join('连接符') 将数组拼接为字符串
					-->
			{{msg.split('').reverse().join('')}}
			
			<!-- 计算属性说明:为了简化插值表达式,可以将计算属性的过程保存到计算属性中 -->
			{{reverseStr}}
			{{ReverseStr()}}
			
			<!-- 计算属性与方法的区别
					1.计算属性有缓存操作 只执行一次  效率高
					2.计算属性调用时,只需要写属性名称
					3.用户每次调用都会执行方法,没有缓存操作
					4.方法调用时需要添加 xxx()-->
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app =new Vue({
				el:"#app",
				data:{	
					msg:''
					
				},
				methods:{
					ReverseStr(){
						console.log("方法调用")
						return this.msg.split('').reverse().join('')
					}
				},
				//定义计算属性
				computed:{
					//必须有返回值
					reverseStr(){
						return this.msg.split('').reverse().join('')
					}
				}
				
			})
		</script>
	</body>
</html>
